<script>
export default {
  name: 'formPage',
  props: {
    msg: String,
    formData: Object
  },
  data: function (){
    return {
      form: this.formData
    }
  }
}


</script>

<template>
  <el-header>{{ form.title }}</el-header>
  <el-main>
    <el-row :gutter="20">
      <el-col :span="10" :offset="7">
        <el-form :model="form" label-width="120px" label-position="top" :offset="6">


          <div v-for="(item,index) in this.$data.form.formItems" :key="index" :model="item" >
            {{ item.customConf.tagType }}
            <el-form-item :label="item.customConf.title" >
              <el-select v-if="item.customConf.tagType === 'SELECT'">
                <el-option
                    v-for="option in item.customConf.options"
                    :key="option.value"
                    :label="option.label"
                    :value="option.value"
                />
              </el-select>
              <el-radio-group v-else-if=" item.customConf.tagType === 'RADIO'">
                <el-radio
                    v-for="radio in item.customConf.options" :key="radio.value"
                    :label="radio.label"
                ></el-radio>
              </el-radio-group>
              <el-date-picker v-if=" item.customConf.tagType === 'DATETIME'"></el-date-picker>
              <el-input v-if=" item.customConf.tagType === 'ADDRESS'"></el-input>
              <el-input v-if=" item.customConf.tagType === 'INPUT'"></el-input>
            </el-form-item>
          </div>

        </el-form>

      </el-col>
    </el-row>
  </el-main>
  <el-footer>

  </el-footer>
</template>

<style scoped>

</style>
